<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <input-test v-model="value" :syncTest.sync="syncTest"></input-test>
    <div>{{value}}</div>
    <bind-test ref="refTest" class="class2" data-test="test" v-bind="testData" v-on:click.native="native">
      <h1 slot="red">红色的标题</h1>
      <h1 slot="yellow">黄色内容</h1>
      <h1>主要内容</h1>
    </bind-test>
    <button @click="changeCom">切换组件</button> 
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
// import app from './../main'
import InputTest from './../components/Input-component-test'
import BindTest from './../components/VbindTest'
const com1 = {
  template: '<p>组件1</p>'
}
const com2 = {
  template: '<p>组件2</p>'
}
export default {
  components: {
    InputTest, BindTest, com1,com2
  },
  data() {
    return {
      value: 'hello',
      testData: {
        title: 'test',
        content: 'test内容',
        num: 1,
        tel: '15355437198'
      },
      syncTest: 'syncFather',
      currentComponent: 'com1'
    }
  },
  methods: {
    native(event) {
      console.log(event.target)
      console.log(this.$refs.refTest)
    },
    // 动态组件切换
    changeCom() {
      const currentComponent = this.currentComponent
      this.currentComponent = currentComponent === 'com1' ? 'com2' : 'com1'
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>

</style>
